Cara Agar Menu Laman (Pagelist) menjadi Menu Dropdown

KemmaChes

Maret 04, 2019

0

Cara Agar Menu Laman (Pagelist) menjadi Menu Dropdown

Selain tampilan halaman utama, hal selanjutnya yang perlu kita ubah setelah membuat template responsif standar bawaan Blogger adalah menu tampilan ( pagelist) khusus pada tampilan seluler.

Pada tampilan seluler

Mengapa Coba Anda menarik, jika blog Anda memiliki 10 halaman pada Menu Laman, maka pada tampilan seluler akan terlihat seperti pasangan bata yang belum diplester. Untuk mempercatik tampilan menunya, silakan baca cara membuat menu menu agar menjadi menu dropdownpada tampilan seluler.

1. Agar menu dapat kita kendalikan, kita perlu yang idbaru untuk disusupkan Silahkan masuk ke edit HTMLtemplate dan cari kode berikut ini.

<b:widget id='PageList1' locked='false' title='Laman' type='PageList' version='1' visible='true'>⋯</b:widget>

Buka dan buka lagi hingga terlihat pola dari menu laman. Kemudian salin kode di bawah ini, lalu pastekan tepat di atas kode <ul>.

<div id='laman'>
<input type='checkbox'/>
<label>
&#8801;
</label>

Setelah itu pasang pilih </div>tepat di bawah </ul>. 
Hasil akhir akan terlihat seperti diterbitkan di bawah ini.

<b:widget id='PageList1' locked='false' title='Laman' type='PageList' version='1' visible='true'>
  <b:includable id='main'>
.......
.......
    <div id='laman'>
        <input type='checkbox'/>
        <label>
            &#8801;
        </label>
        <ul>
.......
.......
        </ul>
    </div>
........
........
  </b:includable>
</b:widget>

2. Salin kode css di bawah, lalu pastekan tepat di atas ]]></b:skin>

/*Menu laman*/
#laman {
background: transparent;
position:relative;
}
#laman input {
display: none;
margin:0 0;
padding:0 0;
width: 40px;
height: 40px;
opacity: 0;
cursor: pointer;
}
#laman label {
font: bold 45px Arial;
display: none;
width: 45px;
height: 41px;
line-height: 41px;
text-align: center;
}
#laman ul,
#laman li {
width: auto;
margin: 0;
padding: 0;
list-style: none;
z-index: 100;
}
#laman li {
position: relative;
display: inline;
}

3. Salin kode css di bawah, lalu pastekan tepat di bawah @media screen and (max-width: 768px) {

#laman {
border: 3px solid #000000;
height: 40px;
}
#laman ul {
display: none;
top: 100%;
right: 0;
left: 0;
height: auto;
position: absolute;
}
#laman ul.menus {
width: 100%;
position: static;
border: none;
}
#laman li {
display: block;
float: none;
text-align: left;
}
#laman a {
display: block;
line-height: 40px;
padding:0 14px;
text-decoration: none;
color: #000000;
}
#laman li a {
border-bottom: 1px solid rgba(0, 0, 0, .1);
background: #eeeeee;
}
#laman input,
#laman label {
color: #000000;
display: block;
position: absolute;
right: 0;
}
#laman input {
z-index: 4;
}
#laman input:checked + label {
color: #000000;
}
#laman input:checked ~ ul {
display: block;
}

Pada tutorial ini menu halaman dropdownbaru muncul kompilasi blog di perangkat / gadget dengan layar 768px dan di bawahnya, jadi tampilan menu halaman di layar di atas 768px tidak berubah (tetap inline). Anda dapat mengatur kemunculan menu laman dropdowndengan persetujuan kode css di atas media screensesuai ukuran sesuai keinginan Anda.

4. Simpan Template. 

Selanjutnya: Cara Membuka Tombol Selanjutnya Sebelumnya Blogspot dengan Angka

Sekian tutorial cara mengubah tampilan menu dari type inlinemenjadi dropdown / checkboxpada tampilan seluler.